
<html>
<head>
<title>Welcome to ChatUs</title>

<link rel="stylesheet" href="./css/overcast/jquery-ui-1.10.3.custom.css" />
<script src="./js/jquery-1.9.1.js"></script>
<script src="./js/jquery-ui-1.10.3.custom.js"></script>
<script src='./js/custom/strophe.js'></script>
<!-- <link rel="stylesheet" href="/resources/demos/style.css" /> -->
<link type="text/css" href="./css/jquery.ui.chatbox.css" rel="stylesheet" />
<script type="text/javascript" src="./js/custom/jquery.ui.chatbox.js"></script>

<style>
#feedback {
	font-size: 1.4em;
}

#selectable .ui-selecting {
	background: #FECA40;
}

#selectable .ui-selected {
	background: #F39814;
	color: white;
}

#selectable {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 450px;
}

#selectable li {
	margin: 3px;
	padding: 1px;
	float: left;
	width: 100px;
	height: 80px;
	font-size: 4em;
	text-align: center;
}

#selectable .online {
	background: #00FF40;
	color: white;
}
</style>

</head>
<body>
	<div id='login' style='text-align: center'>
	<form name='cred'>
	<table align="center" id="loginTab">
		<tr align="center">
			<td>
				<label for='jid' style="font: normal;font-family: serif;font-size: .8em;">JID:</label> <input type='text' id='jid'
				value="subhamoy" style="font: normal;font-family: sans-serif;serif;font-size: .8em;">
			</td>
			<td>
				 <label for='pass' style="font: normal;font-family: sans-serif;serif;font-size: .8em;">Password:</label>
			<input type='password' id='pass' style="font: normal;font-family: sans-serif;serif;font-size: .8em;"> 
			</td>
				
			<td>
				<label for='server' style="font: normal;font-family: sans-serif;serif;font-size: .8em;">Server:</label> <input type='text' id='serverId'
				value="169.144.56.163" style="font: normal;font-family: sans-serif;serif;font-size: .8em;" disabled="disabled">
			</td>
			<td>
				<!-- <input type="image" id='connect' src="./images/connect_creating.png" alt="Submit"> -->
				 <input type='button' id='connect' value='connect' style="font: normal;font-family: serif;font-size: .8em;">
			</td>
		</tr>
	</table>
	</form>
		<!-- <form name='cred'>
			
			 	
			
		</form> -->
	</div>
	<hr>
	<div id='log'></div>
	<div>
		<ol id="selectable">
			<!--  <li class="ui-state-default">1</li>
  <li class="ui-state-default">2</li>
  <li class="ui-state-default">3</li>
  <li class="ui-state-default">4</li>
  <li class="ui-state-default">5</li>
  <li class="ui-state-default">6</li>
  <li class="ui-state-default">7</li>
  <li class="ui-state-default">8</li>
  <li class="ui-state-default">9</li>
  <li class="ui-state-default">10</li>
  <li class="ui-state-default">11</li>
  <li class="ui-state-default">12</li> -->

		</ol>

	</div>
	<div id="chat_div"></div>
</body>
</html>